<html>
    <head>
        <meta charset="utf-8">
        <script src="../vue.js"></script>
        <style>          
        </style>
    </head>
    <body>
        <!--
            计算属性 和 侦听器 学习
        -->
        <div id="root">
           
           <input v-model="fristName"/><input v-model="lastName"/>
           <p>{{fullName}}</p>
           <h1>{{count}}</h1>
        </div>
        <script>
            var num=10;
           var app1= new Vue({
                el:'#root',//绑定的是dom元素
                data:{
                    fristName:"",
                    lastName:"",
                    count:0
                },
                computed:{
                    fullName:function(){
                        return this.fristName+" "+this.lastName;
                    }
                },
                //侦听器监听变化的次数，并不是统计输入框里面的字符
                watch:{
                    fullName:function(){
                        this.count++;
                    }
                }
            })
        </script>
    </body>
</html>